import { useEffect, useState, forwardRef, useImperativeHandle } from 'react'
import { Button, List, MessagePlugin } from 'tdesign-react'
import { useTranslation } from 'react-i18next'
import Empty from '@/components/Empty'
import { apis, ApiRequest } from '@/service'

import '../index.less'

const { ListItem } = List

const {
  practiceService: {
    getNoteList, // 获取留言列表
    deleteNote, // 删除留言
    deleteAllNote, // 删除所有留言
  }
} = apis

const NoteList = forwardRef((props: any, ref: any) => {

  // 所以这里一定是拿不到值的
  // 因此需要另外一个解决方案
  // 注意看这里函数的参数是一个数组，数组就意味着可以传多个元素，也就是多个大模块
  // 但是，多个大模块应该如何区分，比如 webGames 有title components 也有title
  // 如果单纯的使用 title 那就无法区分了嗯
  // 所以需要先声明，用的是哪一个
  // 使用方法是 t('webGames:title') t('components:title')
  // 注意这里是 :
  // 这个国际化配置还需要研究一下，暂时好像搞不了
  // 不过我们发现，这里的 t 如果有多个模块，你会发现很麻烦，需要加上一个模块名和冒号作为前缀
  // 所以我们尽可能拎出来处理，把 Empty 作为一个自定义的组件，拿到最外面，也就是全局组件
  // 这样就能保证 t 的唯一性了
  const { author } = props

  const { t } = useTranslation(['webGames', 'components'])
  const [noteList, setNoteList] = useState<NoteItemType[]>([])

  useEffect(() => {
    author && getNoteListFnc()
  }, [author])

  /**
   * 获取留言列表
   */
  const getNoteListFnc = () => {
    const params = {
      author
    }
    ApiRequest({ api: getNoteList, params }).then((res: any) => {
      const { code = -1, data = [], note = '' } = res
      if (code > 0) {
        setNoteList(data)
      } else {
        MessagePlugin.error({
          content: note,
          placement: 'top-right',
          duration: 2000
        })
      }
    })
  }

  const onItemDelete = (index: number, id: string) => {
    ApiRequest({ api: deleteNote, params: { id } }).then((res: any) => {
      const { code = -1, data = [], note = '' } = res
      if (code > 0) {
        getNoteListFnc()
        MessagePlugin.success({
          content: note,
          placement: 'top-right',
          duration: 2000
        })
      } else {
        MessagePlugin.error({
          content: note,
          placement: 'top-right',
          duration: 2000
        })
      }
    })
  }

  const clearAllNote = () => {
    // let _noteList = [...noteList]
    // _noteList.forEach((item: NoteItemType, index: number) => {
    //   item.deleteTag = '1'
    // })
    // setNoteList(_noteList)
    ApiRequest({ api: deleteAllNote }).then((res: any) => {
      const { code = -1, status = '0', note = '' } = res
      if (code > 0) {
        getNoteListFnc()
      } else {
        MessagePlugin.error({
          content: note,
          placement: 'top-right',
          duration: 2000
        })
      }
    })
  }

  useImperativeHandle(ref, () => ({ refreshList: getNoteListFnc }))

  return <>
    <List className='note-list-block'>
      {
        noteList.length > 0 ? noteList.map((item: NoteItemType, index: number) => {
          return <ListItem
            className='note-list-item'
            key={index}
            action={<Button onClick={() => { onItemDelete(index, item.id || '') }}>{t('practice.noteBorad.delete')}</Button>}
          >
            <div className='note-list-item-info'>
              <div className='note-list-item-name'>{item.author}</div>
              <div className='note-list-item-content'>
                <div className='content'>{item.content}</div>
                <div className='datetime'>{item.datetime}</div>
              </div>
            </div>
          </ListItem>
        }) : <Empty className='note-list-empty' title={t('components:noDataTitle')} />
      }
      {/* 有两种方式，一种是直接设置 title 的值，去掉description
      另一种是把 title 的值设置成空的
      这里更推荐将 title 的值设成你要展示的值，去掉 description
      另外，这种空列表，或许其他的地方还会有，所以这里推荐统一处理，而不是放在 practice里面
      我指的是 language
      例如 title = t('components.noDataTitle')?
      由于我们只有 aio 和 bug 和 webgame
      所以这里需要新起一个大模块
      但是，由于我们已经使用了
       */}
    </List>
    <Button className='delete-all-button' onClick={clearAllNote}>{t('practice.noteBorad.clearAllNote')}</Button>
  </>
})

export default NoteList